import React,{useState,useEffect,useCallback } from 'react'
import {useNavigate} from 'react-router-dom'
import { Grid, Image, Ellipsis } from 'antd-mobile'
import request,{baseUrl} from '@/utils/request'

function Man(){
    const [datalist, setDatalist] = useState([])
    useEffect(()=>{
        request('/goods',{
            params:{
                category:'男士表'
            }
        }).then(({data})=>{
            setDatalist(data.data.result)
        })
    },[])

    const navigate = useNavigate()
    const gotoDetail = useCallback((id) => {
        navigate('/goods?id=' + id)
    }, [])
    return (
        <div>
            <h4>男士表</h4>
            <Grid columns={2} gap={18}>
                {
                    datalist.map(item => (
                        <Grid.Item key={item._id} onClick={gotoDetail.bind(null, item._id)}>
                            <Image src={baseUrl + item.img_url} width="100%" />
                            <Ellipsis content={item.goods_name} rows={3} expandText="展开" collapseText="收起">

                            </Ellipsis>

                            <p className='price'><del>{item.price}</del><span>{item.sales_price}</span></p>
                        </Grid.Item>

                    ))
                }
            </Grid>
        </div>
    )
}

export default Man